<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style>
  html,
body {
    margin: 0;
    padding: 0;
    background-color: hsl(195, 100%, 7%);
    position:relative;
}
#canvas {
position:absolute;
    margin: 0 auto;
    display: block;
    filter: url('#shadowed-goo');
}
svg {
    display: none;
}
    </style>
</head>
<body>
<script src="./2.js"></script>
<script src="./1.js"></script>

<canvas id="canvas"></canvas>
<!-- SVG Goo filter from: https://css-tricks.com/gooey-effect/ -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="shadowed-goo">

            <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10"/>
            <feColorMatrix in="blur" mode="matrix"
                           values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo"/>
            <feGaussianBlur in="goo" stdDeviation="3" result="shadow"/>
            <feColorMatrix in="shadow" mode="matrix"
                           values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -0.2" result="shadow"/>
            <feOffset in="shadow" dx="1" dy="1" result="shadow"/>
            <feBlend in2="shadow" in="goo" result="goo"/>
            <feBlend in2="goo" in="SourceGraphic" result="mix"/>
        </filter>
        <filter id="goo">
            <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10"/>
            <feColorMatrix in="blur" mode="matrix"
                           values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo"/>
            <feBlend in2="goo" in="SourceGraphic" result="mix"/>
        </filter>
    </defs>
</svg>
<div style=" text-align:center;padding-top:100px;background:transparent;position:absolute; width:100%;height:100%">
    <img src="zi.png" width="330.3" height="134.1">
</div>

</body>
</html>
